<template>
  <div class="container">
    <!--<img class="icon-left" :src="iconLeft" v-if="iconLeft"/>-->
    <span class="title-left" v-text="textLeft"></span>
    <div class="expand"></div>
    <!--<span class="title-right" v-text="textRight"></span>-->
    <img class="avatar" :src="avatar"/>
    <img class="icon-right" :src="iconRight" v-if="iconRight"/>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    /** kebab-case */
    name: 'cell-avatar-pciker',

    data() {
      return {};
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      textLeft: {
        type: String,
        required: true,
        default: 'text-left-required!!!'
      },
      iconRight: {
        type: String,
        default: null
      },
      avatar: {
        type: String,
        default: null,
        required: true
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .container
    flex-x()
    height vw(60)
    width vw(345)
    background-color white
    margin-top: vw(20)
    border-radius vw(5)

  .icon-right
    margin-right cell-margin
    width vw(15)

  .title-left
    margin-left cell-margin
    word-main()
    font-size word14

  .avatar
    width 12vw
    height 12vw
    border-radius(6vw)
    margin-right cell-margin

  .expand
    flex 1
</style>
